<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="close">
			<view class="backicon"></view>
		</view>
		<view class="toptitle">
			<text>考勤记录</text>
		</view>
		<view class="funbk">
			<view style="height: 1360rpx;">
				<u-subsection :list="hots" :current="index" @change="sectionChange"
					bgColor="rgba(255, 255, 255, 0.9)" fontSize=16></u-subsection>
				<view class="all">
					<view class="bar-show">
						<view>
							<text class="info">
								<text style="color: #5555ff;">考勤</text>：{{allClocking}}次
							</text>
						</view>
						<view>
							<text class="info">
								<text style="color: #19be6b;">已到</text>：{{allArrive}}次
							</text>
						</view>
					</view>
					<view class="bar-show">
						<view>
							<text class="info">
								<text style="color: #4786ff;">请假</text>：{{allLeave}}次
							</text>
						</view>
						<view>
							<text class="info">
								<text style="color: #ff0000;">旷课</text>：{{allTruancy}}次
							</text>
						</view>
					</view>
					<view class="bar-show">
						<view>
							<text class="info">
								<text style="color: #7d7d7d;">早退</text>：{{allEarly}}次
							</text>
						</view>
						<view>
							<text class="info">
								<text style="color: #ffa647;">迟到</text>：{{allLate}}次
							</text>
						</view>
					</view>
				</view>
				<view v-if="flag">
					<my-calender ref="cal" :clearDate="true" :showMonth="false" :insert="true" :selected="selected" :lunar="false"
								:start-date="'1990-01-01'" :end-date="'2099-01-01'" @monthSwitch="monthSwitch" @change="dateChange"
								@selectedChange="selectedChange">
					</my-calender>
					<view class="tips">
						<text class="uni-calendar-item__weeks-box-circle"></text>
						<text class="tips-text">正常</text>
						<text class="uni-calendar-item__weeks-box-circle" style="left: 26%; background-color: #FE315D;"></text>
						<text class="tips-text" style="left: 29%;">旷课</text>
						<text class="uni-calendar-item__weeks-box-circle" style="left:46%; background-color: #4786FF;"></text>
						<text class="tips-text" style="left: 49%;">请假</text>
						<text class="uni-calendar-item__weeks-box-circle" style="left: 66%;background-color: #FFA647;"></text>
						<text class="tips-text" style="left: 69%;">迟到</text>
						<text class="uni-calendar-item__weeks-box-circle" style="left: 86%;background-color: #C4C4C3;"></text>
						<text class="tips-text" style="left: 89%;">早退</text>
					</view>
					<view class="bottom">
						<view v-if="showinfo.length==0" style="text-align: center;width: 100%;margin-top: 200rpx;">
							<text style="font-weight: bold;color: #adadac;">暂无记录哦~</text>
						</view>
						<u-list height="280rpx">
							<u-list-item v-for="(item, index) in showinfo" :key="index">
								<view style="width: 95%;border-radius: 40rpx;margin-left: 20rpx;
									margin-top: 20rpx;margin-bottom: 10rpx; color: white;"
									:class="{'btn-show':true,'u-line-success': item.status == 1,
									'u-line-leave': item.status == 2, 'u-line-late': item.status == 3,
									'u-line-early': item.status == 4,  'u-line-danger': item.status == 5}">
									<view style="float: left;margin-left: 40rpx;">
										<text class="btn-info">
											{{item.date}}{{item.coursename}}
										</text>
									</view>
									<view style="float: right; margin-right: 30rpx;font-size: 35rpx;">
										<text class="btn-info">
											{{item.info}}
										</text>
									</view>
								</view>
							</u-list-item>
						</u-list>
					</view>	
				</view>
				<view v-else>
					<view>
						<u-tabs :list="years" :current="yearIndex" @change="yearChange" keyName="year"></u-tabs>
					</view>
					<view style="margin-top: 10rpx;" class="u-demo-block__content">
					</view>
					 <view class="charts-box" style="margin-top: 40rpx;">
						<qiun-data-charts 
						  type="area"
						  :opts="opts"
						  :chartData="chartData"
						/>
				  </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		HNIT_URL
	} from "@/constants/index.js";
	import { data } from "../../../uni_modules/uview-ui/libs/mixin/mixin";
	var _self;
	var canvaArea=null;
	export default {
	data() {
		return {
			selected: [{
				date: '2023-07-18', // date为所需要打点的日期
				type: "success",
			}],
			// 该学生是否全勤
			present: 0,
			// 考勤总数
			allClocking:0,
			// 已到总数
			allArrive: 0,
			// 请假总数
			allLeave: 0,
			// 旷课总数
			allTruancy: 0,
			// 早退总数
			allEarly: 0,
			// 迟到总数
			allLate: 0,
			// 被选中的月份
			selectedMonth: '',
			// 被选中的日期
			selectedDate: '',
			stuid: '',
			// 当月的总信息
			// 展示信息
			showinfo: [],
			monthInfo: {},
			// 当前月份
			month: 1,
			temp: '',
			// 更改年份，永远是学年的下一年
			hots:['月', '年'],
			index: 0,
			flag: true,
			years: [{}],
			// 选择年份下标
			yearIndex: 0,
			chartData: {},
			show: true,
			  //您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#ea7ccc","#73C0DE","#3CA272","#FC8452","#9A60B4"],
				padding: [15,15,0,15],
				enableScroll: false,
				legend: {},
				xAxis: {
				  disableGrid: true
				},
				yAxis: {
				  gridType: "dash",
				  dashLength: 2
				},
				extra: {
				  area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow"
				  }
				}
			  },
		  months: [],
		  monthStatus: [],
		  showDate: [],
		  statusData:[]
		}
	},
	mounted(){
		this.stuid = uni.getStorageSync("name");
		this.selectAllYears()
		if(this.hots[this.index] == '月'){
			this.init();
			this.queryByMonth();
			this.dateChange()
		}
	},
	methods: {
		// 返回上一页
		close() {
			uni.reLaunch({
				url: '/pages/student/home/index'
			});
		},
		// 查询所有年份
		selectAllYears(){
			this.$request.get(HNIT_URL + "wx/attendance/get/allyears/" + this.stuid).then(res=>{
				if(res.data){
					let i = 0;
					res.data.forEach(year=>{
						this.years[i] = {}
						this.years[i++].year = year;
					})
				}
				// this.years = res.data
				this.selectAllMonths();
			})
		},
		// 查询所有月份
		selectAllMonths(){
			this.$request.get( HNIT_URL + "wx/attendance/get/allmonths/" + this.years[this.yearIndex].year).then(res=>{
				this.months = res.data;
				this.getServerData()
			})
		},
		// 顶部 月和年 改变事件
		sectionChange(index) {
			if(this.index == index){
				return;
			}
			this.index = index;
			if(this.hots[this.index] == '年'){
				setTimeout(tmp=>{
					this.queryByYear()
				}, 100)
				this.flag = false;
			}else{
				this.init();
				this.queryByMonth();
				this.dateChange()
				this.flag = true;
			}
		},
		// 年份改变查询
		yearChange(index){
			if(this.yearIndex == index.index){
				return;
			}
			this.yearIndex = index.index;
			this.queryByYear();
			this.selectAllMonths();
		},
		// 初始 年 月 日 更新为当前选中年月日
		init(){
			if(this.hots[this.index] != '月'){
				return;
			}
			this.selectedMonth = this.$refs.cal.nowDate.year + "-" + this.$refs.cal.nowDate.month
			this.selectedDate = this.$refs.cal.nowDate.fullDate;
			this.temp = this.$refs.cal.nowDate.month + '';
			if(this.temp.substring(0, 1) == '0'){
				this.month = parseInt(this.temp.substring(1, 2))
			}else {
				this.month =  parseInt(this.temp)
			}
			
		},
		/**
		 * 选中日期的触发事件
		 */
		dateChange: function(e) {
			if(e){
				if(this.selectedDate == e.fulldate){
					return;
				}
				this.selectedDate = e.fulldate;
			}
			let params = {
				date : this.selectedDate
			}
			this.$request.get(HNIT_URL + 'wx/records/get/' + this.stuid, params).then(res=>{
				if(res.data[this.selectedDate]){
					this.showinfo = res.data[this.selectedDate]
					this.showinfo.forEach(item => {
						if(item.status == 1){
							item.info = '已到'
						}else if(item.status == 2){
							item.info = '请假'
						}else if(item.status == 3){
							item.info = '迟到'
						}else if(item.status == 4){
							item.info = '早退'
						}else if(item.status == 5){
							item.info = '旷课';
						}
					})
				}else{
					this.showinfo = []
				}
			})
		},
		/**
		 *  选中月份的触发事件
		 */
		monthSwitch:function(e){
			
			this.init()
			this.queryByMonth()
			this.dateChange()
		},
		/**
		 * 弹窗修改日期
		 */
		selectedChange(e){
			this.init();
			this.dateChange()
		},
		/**
		 * 通过月份查询考勤记录
		 */
		queryByMonth(){
			this.allArrive = 0;
			// 请假总数
			this.allLeave = 0,
			// 旷课总数
			this.allTruancy = 0,
			// 早退总数
			this.allEarly = 0,
			// 迟到总数
			this.allLate = 0,
			this.selected = [];
			let params = {
				date : this.selectedMonth
			}
			this.$request.get(HNIT_URL + 'wx/records/get/month/' + this.stuid, params).then(res=>{
				this.monthInfo = res.data
				for (let name in this.monthInfo) {
					let select = {}
					select.date = name;
					// 将status转化为状态 旷课优先显示
					for(let i = 0; i < this.monthInfo[name].length; ++i){					
						if(this.monthInfo[name][i].status == 5){
							this.allTruancy ++;
							select.type = 'danger'
						}else if(this.monthInfo[name][i].status == 4){
							this.allEarly ++;
							if(select.type == null){
								select.type = 'early';
							}
						}else if(this.monthInfo[name][i].status == 3){
							this.allLate ++;
							if(select.type == null){
								select.type = 'abnormal'
							}
						}else if(this.monthInfo[name][i].status == 2){
							this.allLeave ++;
							if(select.type == null){
								select.type = 'normal';
							}
						}else{
							this.allArrive++;
						}
					}
					if(select.type == null){
						select.type = 'success';
					}
					this.selected.push(select)
				}
				this.allClocking = this.allArrive + this.allTruancy + this.allEarly + this.allLate + this.allLeave;
			})
		},
		// 查询每年统计考勤
		queryByYear(){
			let params = {
				date : this.years[this.yearIndex].year
			}
			this.$request.get(HNIT_URL + 'wx/records/get/all/' + this.stuid, params).then(res=>{
				if(res.data){
					this.allArrive = res.data.status1
					this.allTruancy = res.data.status5;
					this.allLeave = res.data.status2;
					this.allEarly = res.data.status4;
					this.allLate = res.data.status3;
					this.allClocking = this.allArrive + this.allTruancy + this.allEarly + this.allLate + this.allLeave;
				}
			})
		},
		queryPerMonth(status){
			let params = {
				date : this.years[this.yearIndex].year
			}
			this.$request.get(HNIT_URL + "wx/records/get/permonth/" + this.stuid + "/" + status, params).then(res=>{
				this.monthStatus[status] = res.data;
				this.statusData[status] = []
				
				if(this.monthStatus[status] && this.monthStatus[status].length > 0){
					this.monthStatus[status].forEach(item=>{
						item.date = item.date.substring(5);
						this.statusData[status].push(parseInt(item.count));
					})
				}
			})
		},
		getServerData() {
		  //模拟从服务器获取数据时的延时
		  this.statusData[1] = []
		  this.statusData[2] = []
		  this.statusData[3] = []
		  this.statusData[4] = []
		  this.statusData[5] = []
		  this.queryPerMonth(1);
		  this.queryPerMonth(2);
		  this.queryPerMonth(3);
		  this.queryPerMonth(4);
		  this.queryPerMonth(5);
		  //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		  let tableData = {
		  	categories: this.months,
		  	series: [
		  	  {
		  		name: "已到",
		  		data: []
		  	  },
		  	  {
		  		name: "请假",
		  		data: []
		  	  },
		  	  {
		  		name: "迟到",
		  		data: []
		  	  },
		  	  {
		  		name: "早退",
		  		data: []
		  	  },
		  	  {
		  		name: "旷课",
		  		data: []
		  	  },
		  	]
		  };
		  setTimeout(() => {
			tableData.series[0].data = this.statusData[1];
			tableData.series[1].data = this.statusData[2];
			tableData.series[2].data = this.statusData[3];
			tableData.series[3].data = this.statusData[4];
			tableData.series[4].data = this.statusData[5];
			this.chartData = JSON.parse(JSON.stringify(tableData));
		  }, 500);
		},
	},
}
</script>

<style>
	.funbk{
		background-color: white;
		width: 100%;
		height: 1500rpx;
		margin-top: 20rpx;
	}
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	  .charts-box {
	    width: 100%;
	    height: 300px;
	  }
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.toptitle {
		margin-top: 80rpx;
		font-weight: bold;
		font-size: 60rpx;
		color: aquamarine;
		text-align: center;
	}
	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}
	
	.back {
		position: fixed;
		width: 80rpx;
		margin-top: -1415rpx;
		height: 60rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		border: 1rpx #c6c6c6 solid;
		backdrop-filter: blur(5px); /* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
	}
	.u-card-wrap { 
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #F0FBF5;
		padding: 20rpx 10rpx;
		line-height: 100rpx;
	}
	
	.u-line-success{
		background-color: #19BE6B;
		border-radius: 18rpx;
		height: 100rpx;
	}
	.u-line-danger{
		background-color: #FE315D;
		border-radius: 18rpx;
		height: 100rpx;
	}
	.u-line-late{
		background-color: #FFA647;
		border-radius: 18rpx;
		height: 100rpx;
	}
	.u-line-leave{
		background-color: #4786FF;
		border-radius: 18rpx;
		height: 100rpx;
	}
	.u-line-early{
		background-color: #C4C4C3;
		border-radius: 18rpx;
		height: 100rpx;
	}
	.tips{
		position: relative;
		margin-top: 20rpx;
	}
	.uni-calendar-item__weeks-box-circle {
		position: absolute;
		/* top: 75%;
		right: 46rpx; */
		top: 10rpx;
		left: 6%;
		width: 8px;
		height: 8px;
		border-radius: 5px;
		background-color: #19BE6B;
	}
	.tips-text{
		position: absolute;
		left: 9%;
		font-weight: bolder;
	}
	.all{
		height: 160rpx;
		border-radius: 18rpx;
	}
	.info{
		line-height: 80rpx;
		font-weight: bolder;
	}
	.bottom{
		margin-top: 80rpx;
	}
	.btn-show{
		width: 100%;
	}
	.btn-info{
		font-weight: bolder;
		line-height: 100rpx;
	}
	.bar-show{
		display: inline-block;
		width: 25%;
		margin-left: 8%;
	}
	page {
		/* background-color: #eeeeee; */
		background: linear-gradient(to top, #55aaff 0%, #120f6d 100%);
		background-size: 100% 200%;
		animation: aurora 10s infinite;
		
	}
	@keyframes aurora {
	  0% {
	    background-position-y: 0;
	  }
	  50% {
	    background-position-y: 100%;
	  }
	  100% {
	    background-position-y: 0;
	  }
	}
</style>
